<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .con {
            display: block;
            width: 610px;
            height: 500px;
            margin: 100px auto;
        }
        .con li {
            list-style: none;
            float: left;
            width: 300px;
            height: 50px;
            font-size: 22px;
            text-align: center;
            border: 2px solid #000000;
            line-height: 50px;
        }
        .con li:nth-child(1) {
            border-bottom :2px solid white;
            color: red;
        }
        #d1,#d2 {
            font-size: 22px;
            float: left;
            line-height: 50px;
        }
    </style>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('.con li').eq(0).click(function () {
                $('#d1').show();
                $('.con li').css({'borderBottom':'2px solid #000','color':'#000'});
                $(this).css({'border-bottom':'2px solid white','color':'red'});
                $('#d2').hide();
            })
            $('.con li').eq(1).click(function () {
                $('#d2').show();
                $('.con li').css({'borderBottom':'2px solid #000','color':'#000'});
                $(this).css({'border-bottom':'2px solid white','color':'red'});
                $('#d1').hide();
            })

            //////////////////////////////
            $('.con li').eq(0).mousemove(function () {
                $('#d1').show();
                $('.con li').css({'borderBottom':'2px solid #000','color':'#000'});
                $(this).css({'border-bottom':'2px solid white','color':'red'});
                $('#d2').hide();
            })
            $('.con li').eq(1).mousemove(function () {
                $('#d2').show();
                $('.con li').css({'borderBottom':'2px solid #000','color':'#000'});
                $(this).css({'border-bottom':'2px solid white','color':'red'});
                $('#d1').hide();
            })
        })
    </script>
</head>
<body>
<ul class="con">
    <li>
        标题1
    </li>
    <li>
        标题2
    </li>
    <div id="d1">
        <p>哈哈哈哈哈哈11111111</p>
        <p>哈哈哈哈哈哈11111111</p>
        <p>哈哈哈哈哈哈11111111</p>
        <p>哈哈哈哈哈哈11111111</p>
        <p>哈哈哈哈哈哈11111111</p>
        <p>哈哈哈哈哈哈11111111</p>
        <p>哈哈哈哈哈哈11111111</p>
        <p>哈哈哈哈哈哈11111111</p>
        <p>哈哈哈哈哈哈11111111</p>
    </div>
    <div id="d2" style="display: none">
        <p>快快快快快快45454545</p>
        <p>快快快快快快45454545</p>
        <p>快快快快快快45454545</p>
        <p>快快快快快快45454545</p>
        <p>快快快快快快45454545</p>
        <p>快快快快快快45454545</p>
        <p>快快快快快快45454545</p>
        <p>快快快快快快45454545</p>
        <p>快快快快快快45454545</p>
    </div>
</ul>
</body>
</html>